import React, { useState, useEffect } from "react";
import InterTime from "@/components/InterTime";
import Tabs from '@/components/Tabs'
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { fetchUserOrder } from '@/server/order';
import { backgroundObj, loginData } from '@/utils/utils'
import Router from '@/utils/router';
import "./index.scss";

export default (props) => {
  const { params } = getCurrentInstance().router
  const { status = '' } = params
  const { organizationId = '1' } = loginData() || {}
  const [data, setData] = useState([])
  const [page, setPage] = useState({
    page: 1,
    limit: 10
  })
  useEffect(() => {
    fetchData()
  }, [page])
  useReachBottom(() => {
    setPage({
      ...page,
      page: page.page + 1
    })
  })
  useEffect(() => {
    fetchData()
  }, [page])
  useReachBottom(() => {
    setPage({
      ...page,
      page: page.page + 1
    })
  })
  const [activeKey, setActiveKey] = useState(status)
  const [tabs, setTabs] = useState([{
    label: '全部',
    value: ''
  }, {
    label: '待付款',
    value: '0'
  }, {
    label: '已付款',
    value: '1'
  }, {
    label: '已关闭',
    value: '2'
  }, {
    label: '已完成',
    value: '3'
  }])

  const OrderCard = (props) => {
    const { data = {} } = props
    const {
      createTime,
      orderDesc,
      orderSn,
      payFee = 0,
      totalFee,
      refusedFlag,
      goodsAmount,
      payMode,
      status } = data
    let desc = JSON.parse(orderDesc) || [];
    const { goodsName, goodsCover } = desc
    const renderRightTitle = {
      0: <View className="OrderList_card_right OrderList_card_status1">待付款</View>,
      1: <View className="OrderList_card_right OrderList_card_status2">已支付</View>,
      2: (
        <View className="OrderList_card_right OrderList_card_status3">
          {refusedFlag === "1" ? "已退款" : "交易关闭"}
        </View>
      ),
      3: (
        <View className="OrderList_card_right OrderList_card_status3">
          已完成
        </View>
      ),
    }[status];
    const renderBottom = () => {
      if (status === '0') {
        return <View className="OrderList_card_bottom">
          <View className="orderList_pay_btntime">
            剩余
            <InterTime
              fn={() => updateStatus(item)}
              times={createTime}
            ></InterTime>
            自动关闭
          </View>
          <View onClick={() => {
            Router('SubmitOrder', {
              args: {
                orderSn
              }
            })
          }} className="OrderList_bottom_btnStyle1 OrderList_bottom_btn">继续付款</View>
        </View>
      }
      return null
    }
    return <View className="OrderList_card_box" onClick={() => {
      Router('orderDetails', {
        args: {
          orderSn
        }
      })
    }}>
      <View className="OrderList_card_title">
        <View className="OrderList_card_left">
          订单编号：{orderSn}
        </View>
        {renderRightTitle}
      </View>
      <View className="OrderList_card_content">
        <View style={backgroundObj(goodsCover)} className="OrderList_card_profile"></View>

        <View className="OrderList_card_body">
          <View className="OrderList_body_title">
            {goodsName}
          </View>
          <View className="OrderList_body_price">
            ¥{payFee}
          </View>
        </View>
      </View>
      <View className="OrderList_card_bottom">
        {/* {renderBottom()} */}

      </View>
    </View>
  }
  const updateStatus = (item) => {
    setList(list.map(data => {
      if (item.orderSn === data.orderSn) {
        return {
          ...data, status: '2'
        }
      } else {
        return data
      }
    }))
  }
  const fetchData = () => {
    fetchUserOrder({ organizationId, ...page, status: activeKey }).then(val => {
      const { orderList } = val
      setData([...data, ...orderList])
    })
  }
  return (
    <View className="orderList_box">
      <Tabs list={tabs} onChange={(e) => {
        setActiveKey(() => {
          setPage(() => {
            setData([])
            return {
              ...page,
              page: 1
            }
          })
          return e
        })
      }} active={activeKey}>
      </Tabs>
      <View className="orderList_data">
        {data.map((item, index) => {
          return <OrderCard key={index} data={item}></OrderCard>
        })}
      </View>
    </View>
  );
};

